import React, { Component, createRef } from 'react'
import { Card,Row, Col } from "antd";
import * as echarts from 'echarts';

import "./style.css";
import { getArticleAmount } from '../../services';

// console.log(echarts);

export default class Darshboard extends Component {
    constructor(props){
        super(props);
        this.state = {

        }
        this.articleAmount = createRef();
    }

    initArticleCharts = ()=> {
        this.articleEcharts = echarts.init(this.articleAmount.current);  //挂在Dom
        getArticleAmount().then(res => {
            // console.log(res);
            // console.log(res.data.amount);
            const chartsData = res.data.amount;
            const xdata = chartsData.map(item => {
                return item.month;
            });
            const ydata = chartsData.map(item => {
                return item.value;
            });
            
            const option = {
                title: {
                    text: '最近浏览量统计图'
                },
                tooltip: {},
                xAxis: {
                    
                    data: xdata
                },
                yAxis: {
                    
                },
                series: [{
                    name: '浏览量',
                    type: 'line',
                    data: ydata
                }]
            }

          
            this.articleEcharts.setOption(option);

        })
    }

    componentDidMount(){
        this.initArticleCharts();
        
    }
    render() {
        return (
            <div>
            <Card
               title="概览"
               bordered={false}
               // style={{ width: '100%', height: 480}}
           >
               <Row gutter={16}>
                       <Col className="gutter-row" span={6}>
                           <div className='Col-Style' style={{backgroundColor:"#2986F6"}}>col-6</div>
                       </Col>
                       <Col className="gutter-row"  span={6}>
                           <div className='Col-Style' style={{backgroundColor:"#AB47BC"}}>col-6</div>
                       </Col>
                       <Col className="gutter-row"  span={6}>
                           <div className='Col-Style' style={{backgroundColor:"#FF7043"}}>col-6</div>
                       </Col>
                       <Col className="gutter-row"  span={6}>
                           <div className='Col-Style' style={{backgroundColor:"#2986F6"}}>col-6</div>
                       </Col>
                       
               </Row>
           </Card>
           <Card
               title="最近浏览量"
               bordered={false}
               style={{ width: '100%', height: 480}}
           >
               <div ref={this.articleAmount} style={{height:400}}/>
           </Card>
       </div>
        )
    }
}



